<template>
  <!-- 生意参谋 好词检索 -->
  <div>
    <div>
      <div style="margin-top: 10px">
        <el-radio-group v-model="keyWordsPath">
          <el-radio-button :label=0>市场热词</el-radio-button>
          <el-radio-button :label=1>竞品好词</el-radio-button>
        </el-radio-group>
      </div>

      <div>
        <el-descriptions border style="margin: 10px 0">
          <el-descriptions-item>
            <template slot="label">
              后台账号
            </template>
            <el-input v-model="tbAccount"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              后台密码
            </template>
            <el-input v-model="tbPassword" type="password" show-password></el-input>
          </el-descriptions-item>
        </el-descriptions>
        <div style="margin: 10px 0">
          <el-switch
              v-model=isDeleteResultFile
              active-text="执行完毕删除本地结果表格">
          </el-switch>
        </div>
      </div>

      <div v-if="keyWordsPath === 0">
        <div>
          <el-card>
            <div slot="header">
              <span>标准品类</span>
              <div style="width: 300px;float: right;">
                <el-button style="display: inline-block;float: right;padding: 3px 0" type="text" @click="addCategory">
                  添加品类
                </el-button>
                <el-input style="width:250px;display: inline-block;float: right;bottom: 30px;right: 70px"
                          v-model="category" placeholder="请输入品类"></el-input>
              </div>
            </div>
            <el-tag
                style="margin: 0 5px 5px 0"
                :key="tag"
                v-for="(tag,index) in categoryList"
                closable
                :disable-transitions="false"
                @close="removeArrayByIndex(categoryList,index)">
              {{tag}}
            </el-tag>
          </el-card>
        </div>
      </div>

      <div v-else-if="keyWordsPath === 1">
        <div>
          <el-card :body-style="{ padding: '10px' }">
            <div slot="header">
              <span>对比商品组</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="addProductGroup">添加商品组</el-button>
            </div>
            <div style="text-align: center;margin: 20px 0" v-if="productList.length > 0">
              <span style="font-size: 15px;color: #bdc3c7">
                注 : 商品信息是名称时可以填模糊名称(例如 : 平底锅,奶锅), 但当输入的为商品 ID 时必须时精确的.
              </span>
            </div>
            <div v-for="(item,index) in productList" :key="index" style="margin: 7px 0;text-align:center">
              <el-input style="width: 28%;display: inline-block;margin-right: 20px;"
                        v-model="productList[index].myProduct" placeholder="本店商品"></el-input>
              <el-input style="width: 28%;display: inline-block;margin-right: 20px;"
                        v-model="productList[index].cProduct1" placeholder="竞品1"></el-input>
              <el-input style="width: 28%;display: inline-block;margin-right: 10px"
                        v-model="productList[index].cProduct2" placeholder="竞品2"></el-input>
              <el-button type="danger" icon="el-icon-delete" circle style="display: inline-block"
                         @click="deleteProductGroup(index)"></el-button>
            </div>
          </el-card>

          <el-card style="margin-top: 20px" :body-style="{ padding: '10px' }">
            <div slot="header">
              <span>关键词忽略设置</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="addIgnoreKey">添加忽略字段</el-button>
              <el-input style="width:250px;display: inline-block;float: right;bottom: 10px;right: 10px"
                        v-model="ignoreKey" placeholder="请输入忽略字段"></el-input>
            </div>
            <div style="text-align: center;margin: 20px 0" v-if="ignoreKeys.length > 0">
              <span style="font-size: 15px;color: #bdc3c7">
                注 : 忽略字段是指关键词中包含此字段会被忽略. (例 : 忽略字段为"官方"那"赫巴兹官方旗舰店"就会被忽略)
              </span>
            </div>
            <div>
              <el-tag
                  style="margin: 0 5px 5px 0"
                  :key="tag"
                  v-for="(tag,index) in ignoreKeys"
                  closable
                  :disable-transitions="false"
                  @close="removeArrayByIndex(ignoreKeys,index)">
                {{tag}}
              </el-tag>
            </div>
            <div>
              <el-descriptions border style="margin: 10px 0">
                <el-descriptions-item>
                  <template slot="label">
                    支付订单数量小于此数的忽略
                  </template>
                  <el-input-number :min="0" v-model="minOrderCount"></el-input-number>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    支付转化率低于此数的忽略(百分比)
                  </template>
                  <el-input-number :min="0" :max="100" v-model="minConversionRate"></el-input-number>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-card>
        </div>
      </div>

      <div v-else>
        <el-empty :image-size="200" description="你选择了不存在的取词路径"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import {isNull} from "@/utils/service";
import msg from "@/utils/message"

export default {
  name: "sycm-search-goodKey",
  props: {
    params: {
      type: Object,
      required: false
    }
  },
  watch: {
    'params': {
      handler(val) {
        this.initParams(this.params)
      }
    }
  },
  created() {
    this.initParams(this.params)
  },
  data() {
    return {
      tbAccount: '',
      tbPassword: '',
      isDeleteResultFile: true,

      category: '',
      //取词路径 0 市场热词 1 竞品好词
      keyWordsPath: 0,
      categoryList: [],

      /*
      * 竞品列表
      * 元素结构 :{
                'myProduct': '德国赫巴兹316不锈钢平底锅蜂窝家用电磁炉牛排煎烙饼煎锅不粘锅',
                'cProduct1' : '559988341398',
                'cProduct2' : '619666590853'
            },
      * */
      productList: [],
      ignoreKey: '',
      /*
      * 需要忽略的关键词 元素结构 ： 字符串
      * */
      ignoreKeys: [],
      /* 竞品最少订单数*/
      minOrderCount: 0,
      /* 竞品最低转化率*/
      minConversionRate: 0,
    }
  },
  methods: {
    initParams(sourceObj){
      if (sourceObj){
        this.tbAccount = sourceObj.tbAccount;
        this.tbPassword = sourceObj.tbPassword;
        this.isDeleteResultFile = sourceObj.isDeleteResultFile;
        this.keyWordsPath = sourceObj.keyWordsPath;
        if (this.keyWordsPath === 0) {
          this.categoryList = sourceObj.categoryList;
        } else if (this.keyWordsPath === 1) {
          this.productList = sourceObj.productList;
          this.ignoreKeys = sourceObj.ignoreKeys;
          this.minOrderCount = sourceObj.minOrderCount;
          this.minConversionRate = sourceObj.minConversionRate;
        }
      }
    },
    getParam() {
      let _t = this;
      let data = {
        tbAccount: _t.tbAccount,
        tbPassword: _t.tbPassword,
        isDeleteResultFile: _t.isDeleteResultFile,
        keyWordsPath: _t.keyWordsPath,
      }
      if (_t.keyWordsPath === 0) {
        return {
          ...data,
          categoryList: _t.categoryList
        };
      } else if (_t.keyWordsPath === 1) {
        return {
          ...data,
          productList: _t.productList,
          ignoreKeys: _t.ignoreKeys,
          minOrderCount: _t.minOrderCount,
          minConversionRate: _t.minConversionRate
        }
      } else {
        return {}
      }
    },
    checkParam() {
      let _t = this;
      let err = "[ 生意参谋-检索好词 ] "
      if (isNull(_t.tbAccount)) {
        msg.warning(err + " 请填写后台账号")
        return false;
      }
      if (isNull(_t.tbPassword)) {
        msg.warning(err + " 请填写后台密码")
        return false;
      }
      if (_t.keyWordsPath === 0) {
        if (_t.categoryList.length === 0) {
          msg.warning(err + " 请至少添加一个标准类目")
          return false;
        }
      } else if (_t.keyWordsPath === 1) {
        if (_t.productList.length === 0) {
          msg.warning(err + " 请至少添加一组对比商品")
          return false;
        }
        for (let i = 0; i < _t.productList.length; i++) {
          if (isNull(_t.productList[i].myProduct)) {
            msg.warning(err + ' 请填写对比商品组的第 ' + (i + 1) + " 行中的本店商品")
            return false;
          } else if (isNull(_t.productList[i].cProduct1)) {
            msg.warning(err + ' 请填写对比商品组的第 ' + (i + 1) + " 行中的竞品1")
            return false;
          } else if (isNull(_t.productList[i].cProduct2)) {
            msg.warning(err + ' 请填写对比商品组的第 ' + (i + 1) + " 行中的竞品2")
            return false;
          }
        }
        if (isNull(_t.minOrderCount) || _t.minOrderCount < 0) {
          msg.warning(err + " 忽略支付订单数量不合法此参数最小为 0")
          return false;
        }
        if (isNull(_t.minConversionRate) || _t.minConversionRate < 0) {
          msg.warning(err + " 忽略最低转化率不合法此参数最小为 0")
          return false;
        }
      } else {
        msg.warning(err + "请选择正确的取词路径例如 : 市场热词/竞品好词")
        return false;
      }
      return true;
    },
    removeArrayByIndex(arr, index) {
      arr.splice(index, 1);
    },

    addCategory() {
      let category = this.category.trim();
      if (!isNull(category)) {
        if (this.categoryList.includes(category)) {
          msg.warning("该品类已经存在")
          return;
        }
        this.categoryList.push(category);
        this.category = "";
      }
    },

    addProductGroup() {
      this.productList.push({
        myProduct: '',
        cProduct1: '',
        cProduct2: '',
      })
    },

    deleteProductGroup(index) {
      this.productList.splice(index, 1)
    },
    addIgnoreKey() {
      let ignoreKey = this.ignoreKey.trim();
      if (!isNull(ignoreKey)) {
        if (this.ignoreKeys.includes(ignoreKey)) {
          msg.warning("该字段已经存在")
          return;
        }
        this.ignoreKeys.push(ignoreKey);
        this.ignoreKey = "";
      }
    }
  }
}
</script>

<style scoped>

</style>